<template>
  <div>
    <div>
      <label style="padding-left: 10px;">课程报名情况</label>
      <el-select
        v-model="courseID"
        size="medium"
        placeholder="请选择课程"
        filterable
        style="width: 300px;margin-left: 200px;margin-top:10px;"
        class="filter-item"
        @change="getList"
      >
        <el-option
          v-for="item in courseDatas"
          :key="item.PRID"
          :label="item.Title"
          :value="item.PRID"
        ></el-option>
      </el-select>
    </div>
    <div id="reportCourseApply"></div>
  </div>
</template>

<script>
import { reqCourseApplyReport, reqGetCourses } from "@/api/report/coursereport";

import Highcharts from "highcharts/highstock";
Highcharts.setOptions({
  lang: {
    resetZoom: "恢复缩放"
  }
});
export default {
  data() {
    return {
      courseID: "",
      courseDatas: [],
      chart: null,
      options: {
        chart: {
          type: "column"
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          min: 0,
          title: {
            text: "人数"
          },
          stackLabels: {
            // 堆叠数据标签
            enabled: true,
            style: {
              fontWeight: "bold",
              color: (Highcharts.theme && Highcharts.theme.textColor) || "gray"
            }
          }
        },
        legend: {
          align: "right",
          x: -30,
          verticalAlign: "top",
          y: 25,
          floating: true,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.background2) || "white",
          borderColor: "#CCC",
          borderWidth: 1,
          shadow: false
        },
        tooltip: {
          formatter: function() {
            return (
              "<b>" +
              this.x +
              "</b><br/>" +
              this.series.name +
              ": " +
              this.y +
              "<br/>" +
              "总量: " +
              this.point.stackTotal
            );
          }
        },
        plotOptions: {
          column: {
            stacking: "normal",
            dataLabels: {
              enabled: true,
              color:
                (Highcharts.theme && Highcharts.theme.dataLabelsColor) ||
                "white",
              style: {
                // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
                textOutline: "1px 1px black"
              }
            }
          }
        },
        series: [
          //   {
          //     name: "小张",
          //     data: [5, 3, 4, 7, 2]
          //   },
          //   {
          //     name: "小彭",
          //     data: [2, 2, 3, 2, 1]
          //   },
          //   {
          //     name: "小潘",
          //     data: [3, 4, 4, 2, 5]
          //   }
        ]
      }
    };
  },
  components: {},
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    async init() {
      let res = await reqGetCourses();
      if (res.code === 200) {
        this.courseDatas = res.data;
        this.courseID = this.courseDatas[0].PRID;
        this.getList();
      }
    },
    async getList() {
      let res = await reqCourseApplyReport(this.courseID);
      if (res.code === 200) {
        this.options.xAxis.categories = res.data.legend;
        this.options.series = res.data.series;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportCourseApply", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
.h {
  text-align: center;
}
</style>